import * as MediaLibrary from 'expo-media-library'
import { Asset } from 'expo-media-library'
import { useEffect, useState } from 'react'
import { Button, Image, Text, View } from 'react-native'

const a = []

const Home = () => {
  const [list, setList] = useState<Asset[]>([])
  const [permissionResponse, requestPermission] = MediaLibrary.usePermissions()

  useEffect(() => {
    console.log('home')
  }, [])

  const handleClick = async () => {
    console.log(permissionResponse)

    // const permissions = await MediaLibrary.getPermissionsAsync()
    // console.log('permissions', permissions)

    const res = await requestPermission()
    console.log('res', res)

    // const record = await MediaLibrary.getAssetsAsync({
    //   first: 60,
    //   mediaType: ['photo'],
    //   sortBy: ['creationTime'],
    // })
    // console.log(record.assets)

    // setList(record.assets)
  }
  return (
    <View>
      <Text>Home</Text>
      <Button onPress={handleClick} title="test" />

      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {list.map(record => (
          <Image
            style={{ width: '24%', height: 100, margin: 1 }}
            key={record.id}
            source={record}
          />
        ))}
      </View>
    </View>
  )
}

export default Home
